<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <button @click="upDateMei()">点击更新信息</button>
        <ul>
            <li v-for="(item,index) in persons " :key="item.id">
                {{item.name}}-{{item.age}}-{{item.sex}}
            </li>
        </ul>

    </div>
    <script>
Vue.config.productionTip = false;
//用computed实现
const vm = new Vue({
    el: "#root",
    data: {
        keyWords: "",
        sortType: 0,
        persons: [
            { id: 0, name: "马冬梅", age: 58, sex: "女" },
            { id: 1, name: "周冬雨", age: 26, sex: "女" },
            { id: 2, name: "周杰伦", age: 31, sex: "男" },
            { id: 3, name: "温兆伦", age: 41, sex: "男" }
        ]
    },
    methods: {
        upDateMei(){
    // this.persons[0] = { id: 0, name: "马老师", age: 69, sex: "男" };  无效

            this.persons.splice(0,1, { id: 0, name: "马老师", age: 69, sex: "男" });
        }
    },
})


    </script>
</body>

</html>